<template>
    <div id="one" class="box1">
        <div class="title">
            <img class="imgls" :src="touxiang" alt="">
            <span class="race">{{ name1 }}</span>
        </div>
        <div v-show="isShow" class="lists bgcw" v-for="(item, index) in data0" :key="index">
            <!-- <div class="date"><span class="date1">{{ list.shijian }}</span></div> -->
            <div class="date"><span class="date1"><span>{{ item.date }}</span>&nbsp;<span>{{ item.matchWeek }}</span></span></div>
            <div class="onetable">
                <table width="100%" align='center' style="border-collapse:collapse;">
                    <tr class="onetitle colortitle">
                    <th>时间</th>
                    <th>轮次</th>
                    <th>主队</th>
                    <th>&nbsp;</th>
                    <th>客队</th>
                    <th>付费金额</th>
                    <th>订阅人数</th>
                    <th>操作</th>
                    </tr>
                    <tr v-for="(item1, index) in item.list" :key="index">
                    <td class="colorlis1" style='height:50px;' align='center' valian='middle'>{{ item1.matchTime }}</td>
                    <td class="colorlis2" style='height:50px;width:120px;' align='center' valian='middle'>{{ item1.matchRound }}</td>
                    <td class="colorlis1 posir" style='height:50px;width:240px;' align='center' valian='middle'><img class="qdimg posia" style="left:0;bottom:7px" :src="item1.zranksPhoto" alt="">{{ item1.zName }}</td>
                    <td class="colorlisvs" style='height:50px;' align='center' valian='middle'>VS</td>
                    <td class="colorlis1 posir" style='height:50px;width:240px;' align='center' valian='middle'>{{ item1.kName }}<img class="qdimg posia" style="right:0;bottom:7px" :src="item1.kranksPhoto" alt=""></td>
                    <td style='height:50px;width:120px;color:#FF0000;' align='center' valian='middle'>￥{{ item1.money }}</td>
                    <td class="colorlis1" style='height:50px;' align='center' valian='middle'>{{ item1.matchSubscribe }}</td>
                    <td style='height:50px;' align='center' valian='middle'><div class="fkck"><a class="chakan" href="javascript:;" :data-id="item1.id" :data-money="item1.money" @click="showPopupCk($event)">付款查看</a></div></td>
                    </tr>
                </table>
            </div>
            <popupck v-show="isPopupVisibleCk" @closeCk="closePopupCk" @closeCk2="closePopupCk2" :yhid='yhid' :fxid='fxid' :money='money'></popupck>
            <popupycfx v-show="isPopupVisibleycfx" @closeycfx="closePopupycfx" :key="timer"></popupycfx>
        </div>
        <div v-show="!isShow" class="meiyou">
                    <img class="mei" src="../../assets/img/mei.png" alt="">
                    <span class="keneng">暂时没有赛事</span>
        </div>
    </div>
</template>
<script>
import popupck from '../popup/popupck'
import popupycfx from '../popup/popupycfx'
export default {
    name: 'one',
    components: {
        popupck,
        popupycfx
    },
  data () {
    return {
        money:'',
        ddh:'',
        fxid:'',
        yhid:'',
        yonghu:'',
        isPopupVisibleCk: false,
        isPopupVisibleycfx:false,
        listone:'',
        name1:'',
        touxiang:'',
        tid:'',
        data0: '',
        isShow:true,
        timer: ''
    }
  },
  created() {
      this.timer = new Date().getTime()
      this.yonghu = JSON.parse(window.localStorage.getItem('yonghuxinxi'))
      console.log('用户1')
      console.log(this.yonghu)
      if(this.yonghu) {
            this.yhid = this.yonghu.id;
            console.log(localStorage.onelist)
            // console.log(JSON.parse(this.$route.query.flid))
            this.listone = JSON.parse(localStorage.onelist||this.$route.query.flid)
            this.tid = this.listone.id
            this.name1 = this.listone.name
            this.touxiang = this.listone.avatar
            console.log(this.name1)
            this.huoqulist()
        }else {
            console.log(localStorage.onelist)
            // console.log(JSON.parse(this.$route.query.flid))
            this.listone = JSON.parse(localStorage.onelist||this.$route.query.flid)
            this.tid = this.listone.id
            this.name1 = this.listone.name
            this.touxiang = this.listone.avatar
            console.log(this.name1)
            this.huoqulist()
            // console.log(JSON.parse(this.$route.query.flid))
            // this.listone = JSON.parse(this.$route.query.flid)
            // this.tid = this.listone.id
            // this.name1 = this.listone.name
            // this.touxiang = this.listone.avatar
            // console.log(this.name1)
            // this.huoqulist()
        }
        // if(this.yonghu) {
        //     this.yhid = this.yonghu.id
        //     console.log(JSON.parse(this.$route.query.flid))
        //     this.listone = JSON.parse(this.$route.query.flid)
        //     this.tid = this.listone.id
        //     this.name1 = this.listone.name
        //     this.touxiang = this.listone.avatar
        //     console.log(this.name1)
        //     this.huoqulist()
        // }else {
        //     console.log(JSON.parse(this.$route.query.flid))
        //     this.listone = JSON.parse(this.$route.query.flid)
        //     this.tid = this.listone.id
        //     this.name1 = this.listone.name
        //     this.touxiang = this.listone.avatar
        //     console.log(this.name1)
        //     this.huoqulist()
        // }
  },
  mounted() {
  },
  watch: {
  $route () {
      console.log(11)
      console.log(localStorage.onelist)
          this.yonghu = JSON.parse(window.localStorage.getItem('yonghuxinxi'))
          console.log('用户2')
      console.log(this.yonghu)
        if(this.yonghu) {
            this.yhid = this.yonghu.id;
            console.log(localStorage.onelist)
            // console.log(JSON.parse(this.$route.query.flid))
            this.listone = JSON.parse(localStorage.onelist||this.$route.query.flid)
            this.tid = this.listone.id
            this.name1 = this.listone.name
            this.touxiang = this.listone.avatar
            console.log(this.name1)
            this.huoqulist()
        }else {
            console.log(localStorage.onelist)
            // console.log(JSON.parse(this.$route.query.flid))
            this.listone = JSON.parse(localStorage.onelist||this.$route.query.flid)
            this.tid = this.listone.id
            this.name1 = this.listone.name
            this.touxiang = this.listone.avatar
            console.log(this.name1)
            this.huoqulist()
            // console.log(JSON.parse(this.$route.query.flid))
            // this.listone = JSON.parse(this.$route.query.flid)
            // this.tid = this.listone.id
            // this.name1 = this.listone.name
            // this.touxiang = this.listone.avatar
            // console.log(this.name1)
            // this.huoqulist()
        }
  }
},
  methods: {
      closePopupycfx(){
      this.isPopupVisibleycfx = false
    },
    async showPopupCk(event){
        var target = event.target || window.event.srcElement,
       //获取对应元素的id值
      id = target.getAttribute('data-id');
      var money = ''
      money = target.getAttribute('data-money');
      console.log('钱')
      console.log(money)
      this.money = money
      this.fxid = id
        console.log('分析id')
        console.log(this.fxid)
        var dd = new FormData()
        dd.set('userId',this.yhid)
        dd.set('analysisId',this.fxid)
        const { data: res } = await this.$http.post('app/zqOrder/innsertOrder.do',dd)
        console.log(res)
        if (res.code !== 0) return alert(res.msg)
        console.log('获取订单号成功')
        this.ddh = res.data
        console.log(this.ddh)
        // window.localStorage.setItem('ddh', this.ddh)
        window.localStorage.setItem('ddh', JSON.stringify(this.ddh));
      this.isPopupVisibleCk = true
    },
    closePopupCk(){
      this.isPopupVisibleCk = false
    },
    closePopupCk2(data){
        console.log('支付成功之后的弹框在此一举')
        console.log(data)
        this.isPopupVisibleycfx = data
        this.isPopupVisibleCk = false
    },
    async huoqulist() {
        var league = new FormData()
        league.set('leagueId',this.tid)
        const { data: res } = await this.$http.post('app/zqMatchAnalysis/list',league)
        if (res.code !== 0) return console.log('获取赛事分析列表失败')
        console.log('获取赛事分析列表成功')
        console.log(res)
        this.data0 = res.data
        if(this.data0.length == 0) {
            this.isShow = false
        }else {
            this.isShow = true
        }
        window.localStorage.setItem('dada0', JSON.stringify(this.data0));
    },
  }
  }
</script>
<style lang="less" scoped>
.box1 {
    .title {
        position: relative;
        height: 60px;
        width: 100%;
        background-color: #fff;
        .imgls {
            position: absolute;
            top: 15px;
            left: 5px;
            width: 30px;
            line-height: 60px;
            height: 30px;
            padding-left: 20px;
        }
        .race {
            position: absolute;
            left: 70px;
            padding-left: 15px;
            width: 150px;
            height: 60px;
            line-height: 60px;
            font-size: 20px;
            font-weight: 30px;
        }
    }
    .lists {
        margin-top: 10px;
        .date {
            width: 100%;
            height: 50px;
            background-color: #B00002;
            line-height: 50px;
            color: #fff;
            .date1 {
                margin-left: 15px;
            }
        }
    }
    .onetable {
        .onetitle {
            background-color: #F3F3F3;
            height: 50px;
        }
    }
}
td {
    border-top: 1px solid #D7D7D7;
}
.fkck {
    height: 30px;
    line-height: 30px;
    width: 75px;
    border: 1px solid #408ED6;
    border-radius:3px;
}

.mleft {
    margin-left: 100px;
}
.bgcw {
    background-color: #FFFFFF;
}
.chakan {
    color: #4490D7;
    text-decoration:none
}
.lineh {
    line-height: 50px;
}


.meiyou {
    width: 100%;
    height: 500px;
    background-color: #fff;
    text-align: center;
}
.keneng {
    display:block;
    margin-top: 20px;
    color: #999999;
}
.mei {
    margin-top: 60px;
}
</style>